<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
    <link rel="stylesheet" href="./css/style.css">
    <script src="https://unpkg.com/vue@3.2.0"></script>
    <script src="./js/data.js"></script>
</head>
<body>
    <!-- 199010127 吴金昔 -->
    <div id="content">
        <div class="topTitle">
            我的疯游&emsp;|&emsp;微信&emsp;|&emsp;客户服务
        </div>
        <div class="header">
            <div class="header_cont">
                <div class="img1"><img src="./img/index_03.png" alt=""></div>
                <h3>您好，欢迎加入疯游精旅游网!</h3>
                <div class="img2"><img src="./img/index_06.png" alt=""></div>
            </div>
        </div>
        <nav>
            <ul class="nav_cont">
                <li><a href="#">首页</a></li>
                <li class="reg"><a href="#">用户注册</a></li>
            </ul>
        </nav>
        <div class="register">
            <form action="">
                <p>
                    昵称&emsp;&emsp;
                    <input type="text" v-model="name" placeholder="英文、数字长度为4-8个字符" @blur="check_name()">
                </p>
                <p>
                    用户姓名<span>*</span>
                    <input type="text" v-model="userName" placeholder="输入中文字符" @blur="check_userName()" >
                </p>
                <p>
                    密码<span>*</span>&emsp;&emsp;
                    <input type="password" v-model="passWord" placeholder="英文、数字长度为4-8个字符" @blur="check_passWord()" >
                </p>
                <p>
                    确认密码<span>*</span>
                    <input type="password" v-model="passWord1" @blur="check_passWord1()">
                </p>
                <p id="sexx">
                    性别&emsp;&emsp;
                    <input type="radio" id="man" v-model="sex" value="1"><label for="man">男</label>
                    <input type="radio" id="woman" v-model="sex" value="2"><label for="woman">女</label>
                </p>
                <p>
                    手机号码<span>*</span>
                    <input type="text"  v-model="phone" @blur="check_phone()" >
                </p>
                <p>
                    地址&emsp;&emsp;&emsp;&emsp;
                    <select v-model="selectsheng" @Change="select_shi()">
                        <option value="" disabled>选择省份</option>
                        <option v-for="shen in need_data" :value="shen.value">{{shen.label}}</option>
                    </select>
                    <select v-model="selectshi" @change="select_qu()">
                        <option value="" disabled>选择市</option>
                        <option v-for="shi in data_shi" :value="shi.value">{{shi.label}}</option>
                    </select>
                    <select v-model="selectqu" >
                        <option value="" disabled>选择区县</option>
                        <option v-for="xian in data_qu" :value="xian.value">{{xian.label}}</option>
                    </select>
                </p>
                <p>
                    出生日期
                    <input type="date" >
                </p>
                <p>
                    身份证号
                    <input type="text" v-model="identfy" @blur="check_identfy()" @keyup.enter.native="check_all()">
                </p>
                <p><input type="button" class="submit" value="确认提交" @Click="check_all()"></p>
            </form>
        </div>
    </div>
</body>
<script>
    Vue.createApp({
        data(){
            return{
                name:"",
                userName:"",
                passWord:"",
                passWord1:"",
                sex:"1",
                phone:"",
                identfy:"",

                // 三级下拉数据
                need_data:datas,
                selectsheng:"",
                data_shi:[],
                selectshi:"",
                data_qu:[],
                selectqu:"",
                
            }
        },
        methods:{
            // 检验昵称合法性
            check_name(){
                if (this.name != "") {
                    if (/^[a-zA-Z0-9]{4,18}$/.test(this.name)) {
                        console.log("合法")
                    }
                    else {
                        alert("用户昵称不合法！")
                        this.name = "";
                    }
                }
                
            },
            
            // 检验用户姓名合法性
            check_userName(){
                if (this.userName == "") {
                    alert("姓名不能为空！")
                }
                else {
                    if (/^[\u4e00-\u9fa5]{2,6}$/.test(this.userName)) {
                        console.log("合法")
                    }
                    else {
                        alert("姓名不合法！")
                    }
                }
            },
            // 检验密码合法性
            check_passWord(){
                if (this.passWord == "") {
                    alert("密码不能为空！")
                }
                else {
                    if (/^[a-zA-Z0-9]{6,20}$/.test(this.passWord)) {
                        console.log("合法")
                    }
                    else {
                        alert("密码不合法！")
                    }
                }
            },
            // 确认密码
            check_passWord1(){
                if(this.passWord == this.passWord1){
                    console.log("合法")
                }
                else{
                    alert("两次密码不一致！")
                }
            },
            // 验证手机号码
            check_phone(){
                if (this.phone == "") {
                    alert("电话号码不能为空！")
                }
                else {
                    if (/^1[3578]\d{9}$/.test(this.phone)) {
                        console.log("合法")
                    }
                    else {
                        alert("手机号码不合法！")
                    }
                }
            },
            // 选择省份
            select_shi() {
                this.need_data.forEach((item) => {
                    if (item.value == this.selectsheng) {
                        this.data_shi = item.children
                    }
                })
            },
            // 选择市区
            select_qu() {
                this.need_data.forEach((item) => {
                    if (item.value == this.selectsheng) {
                        item.children.forEach((item2) => {
                            if (item2.value == this.selectshi) {
                                this.data_qu = item2.children
                            }
                        })
                    }
                })
            },

            // 验证身份证号码
            check_identfy(){
                let _IDRe18 = /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
                let _IDre15 =  /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/
                // 校验身份证：
                if (this.identfy != "") {
                    if (_IDRe18.test(this.identfy) || _IDre15.test(this.identfy)) {
                        console.log("合法")
                    }
                    else {
                        alert("身份证号码不合法！")
                    }
                }
            },
            // 整体验证
            check_all(){
                if(this.userName == ""){
                    alert("用户姓名不能为空！")
                }
                else{
                    if(this.passWord == ""){
                        alert("请设置您的密码！")
                    }
                    else{
                        if(this.passWord1 == ""){
                            alert("请验证你的密码！")
                        }
                        else{
                            if(this.phone == ""){
                                alert("请注册您的手机号码！")
                            }
                            else{
                                alert("注册成功！欢迎您的加入！")
                            }
                        }
                    }
                }
            }
        }
    }).mount("#content")
</script>
</html>